<template>
  <div class="field_container">
    <input
    ref="fieldItem"
      class="field_item"
      v-model="inputValue"
      type="input"
      :placeholder="placeholder"
    />
    <div class="field_icon_wrapper" v-show="clearStatus" @click="clearVal">
      <img src="~@/assets/images/search_icon_del.svg" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
    },
    placeholder: {
      type: String,
      required: false,
    },
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.inputValue = val;
      },
    },
    inputValue: {
      deep: true,
      handler: function (val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      inputValue: "",
      clearStatus: false,
    };
  },
  methods: {
    closeMe(e) {
      if (e.target !== this.$el.querySelector(".field_item")) {
        this.clearStatus = false;
      } else {
        this.clearStatus = true;
      }
    },
    clearVal(){
      this.inputValue='';
      this.$refs.fieldItem.focus();
    }
  },
  created() {
    window.addEventListener("click", this.closeMe);
  },
  beforeDestroy(){
    window.removeEventListener("click", this.closeMe);
  }
};
</script>
<style lang="scss">
.field_container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f5f5f5;
  border-radius: 45px;
  .field_item {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    padding: 0 32px;
    height: 100%;
    background: transparent;
    border: none;
  }
  .field_icon_wrapper {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 30%;
    right: 10%;
    img {
      width: 100%;
    }
  }
}
</style>